<ng-container *ngIf="type !== 'mini' else mini">
  <!-- 1.select下拉组件 -->
  <ti-select
    class="ti3-page-size-option"
    size="small"
    [id]="appendId('select')"
    [options]="itemsPerPage.options"
    *ngIf="itemsPerPage.hide !== true"
    [disabled]="disabled"
    [ngStyle]="itemsPerPage.style"
    (ngModelChange)="onSizeChange($event)"
    [(ngModel)]="itemsPerPage.selected"
  >
    <ng-template let-item>{{item}}</ng-template>
  </ti-select>
  <!-- 2.总条数 -->
  <label class="ti3-pag-total-items" [ngClass]="{'ti3-pag-total-disable': disabled}" *ngIf="showTotalNumber" [id]="appendId('total_items')">
    {{setTotalNumberFormat()}}
    <span *ngIf="loading">+</span>
  </label>
  <!-- 3.页码-->
  <div class="ti3-pag-pages" [ngClass]="{'ti3-pag-pages-disable': disabled}">
    <a
      href="javascript:void(0);"
      oncontextmenu="return false"
      class="ti3-pag-prev"
      [id]="appendId('prev_page')"
      [ngClass]="{disabled: noPrevious() || disabled}"
      [attr.title]="noPrevious() ? '' : 'tiPagination.prevTitle' | tiTranslate"
      [attr.tabindex]="(noPrevious() || disabled) ? -1 : ''"
      (click)="onPrevClick($event)"
    >
      <i class="ti3-icon ti3-icon-angle-left"></i>
    </a>
    <ng-container *ngFor="let page of pages; trackBy: trackByFn">
      <a
        href="javascript:void(0);"
        oncontextmenu="return false"
        class="ti3-pag-page"
        *ngIf="page.active || type !== 'simple'"
        [id]="type !== 'simple' ? appendId('go_') + page.key : 0"
        [attr.tabindex]="(disabled || isEllipse(page) || type === 'simple') ? -1 : ''"
        tiOutline
        [class.active]="page.active && type !== 'simple'"
        [class.simple]="type === 'simple'"
        [class.ellipse]="isEllipse(page)"
        [class.ti3-page-disable]="disabled"
        (click)="onPageClick(page, $event)"
        >{{page.key}}</a
      >
    </ng-container>
    <a
      href="javascript:void(0);"
      oncontextmenu="return false"
      class="ti3-pag-next"
      [id]="appendId('next_page')"
      [ngClass]="{disabled: noNext() || disabled}"
      [attr.title]="noNext() ? '' : 'tiPagination.nextTitle' | tiTranslate"
      [attr.tabindex]="(noNext() || disabled) ? -1 : ''"
      (click)="onNextClick($event)"
    >
      <i class="ti3-icon ti3-icon-angle-right"></i>
    </a>
  </div>
  <!-- 4.跳转按钮 -->
  <div class="ti3-pag-goto" *ngIf="type === 'default' && showGotoLink === true" [ngClass]="{'ti3-pag-goto-disable': disabled}">
    <span class="ti3-pag-goto-text">{{ 'tiPagination.gotoLabel' | tiTranslate }}</span>
    <input
      #input
      class="ti3-pag-goto-input"
      tiText
      type="text"
      [ngModel]="gotoPage.page"
      [disabled]="disabled"
      (ngModelChange)="ngModelChange($event)"
      (keydown.enter)="enterPageHandler($event)"
      [id]="appendId('input')"
    />
    <a class="ti3-pag-goto-icon-container" (click)="gotoPageHandler($event)" [id]="appendId('go')">
      <div class="ti3-pag-goto-icon"></div>
    </a>
  </div>
</ng-container>
<ng-template #mini>
  <div class="ti3-pag-mini-pages">
    <!-- 1.总条数 -->
    <label
      class="ti3-pag-total-items"
      [ngClass]="{'ti3-pag-total-disable': disabled}"
      *ngIf="showTotalNumber"
      [id]="appendId('total_items')"
      >{{setTotalNumberFormat()}}</label
    >
    <!-- 2.上一页 -->
    <a
      href="javascript:void(0);"
      oncontextmenu="return false"
      class="ti3-pag-prev"
      [id]="appendId('mini_prev_page')"
      [ngClass]="{disabled: noPrevious() || disabled}"
      [attr.title]="noPrevious() ? '' : 'tiPagination.prevTitle' | tiTranslate"
      [attr.tabindex]="(noPrevious() || disabled) ? -1 : ''"
      (click)="onPrevClick($event)"
    >
      <i class="ti3-icon ti3-icon-angle-left"></i>
    </a>
    <!-- 3.下拉框 -->
    <ti-select
      size="small"
      class="ti3-page-mini-option"
      [ngStyle]="{width: pageSelectWidth}"
      [options]="itemsMini.options"
      [id]="appendId('mini_select')"
      [(ngModel)]="itemsMini.selected"
      [disabled]="disabled"
      [virtual]="pageSelectVirtual"
      (ngModelChange)="itemsMini.change($event)"
    >
    </ti-select>
    <!-- 4.下一页 -->
    <a
      href="javascript:void(0);"
      oncontextmenu="return false"
      class="ti3-pag-next"
      [id]="appendId('mini_next_page')"
      [ngClass]="{disabled: noNext() || disabled}"
      [attr.title]="noNext() ? '' : 'tiPagination.nextTitle' | tiTranslate"
      [attr.tabindex]="(noNext() || disabled) ? -1 : ''"
      (click)="onNextClick($event)"
    >
      <i class="ti3-icon ti3-icon-angle-right"></i>
    </a>
  </div>
</ng-template>
